<template>
  <div class="ui dimmer page transition" :class="{active: isActive}"  @click="oncancel">
    <div class="ui modal visible active">
      <div class="header"><i class="icon remove"  @click="oncancel"></i></div>
      <div class="content" @click.stop="" v-if="component_name">
        <component v-if="component_name == 'editCom'" :is="component_name" :otherEdit="true" :otherEdit_mid="91" @dosth="onsubmit"></component> 
        <div class="ui segment" v-else>
          <component :is="component_name" @onsubmit="onsubmit"  @oncancel="oncancel" @onchange="onchange" :data="data" :title="title"></component>
        </div>
      </div>
      <div class="content" @click.stop="" v-else>
        无数据
      </div>
    </div>
  </div>
</template>
<script>
  import tool from 'src/util/tool';
  import util from '_util/index';

  import tFields from 'components/tunit/tFields'
  import editCom from 'components/edit/editCom'

  export default {
    data() {
      return {
       isActive: false,
       vo:{},
     }
   },
   components: {
    tFields,
    editCom,
  },
  methods: {
    closepop(){
      this.isActive = false;
      this.$emit("onhide", {});
    },
    onsubmit(form){
      this.$emit('onsubmit', form)
    },
    onchange(filed, form){
      this.$emit('onchange', filed, form)
    },
    oncancel(){
      this.$emit('oncancel');
      this.closepop();
    }
  },
  props: {
    page:{
      type:String,
      default(){
        return ""
      }
    },
    data:{
      default(){
        return {}
      }
    },
    title:{
      type: String,
      default(){
        return null
      }
    },
    active:{
      type:Boolean,
      default(){
        return false
      }
    }
  },
  watch:{
    data:{
      immediate: true,
      handler(val) {
      }
    },
    active:{
      immediate: true,
      handler(val) {
        this.isActive = val;
      }
    },
    isActive(val){
      this.$emit(val?"onshow":"onhide", this.vo);
    },
  },
  computed:{
    component_name(){
      return this.page || "tFields"
    }
  },
}
</script>
<style lang="less" scoped>
  .ui.dimmer>.ui.modal{
    background-color: transparent;
    height: 100%;
    position: relative;
    margin: 0 auto!important;
    left: inherit;
    top:inherit;
    box-shadow: none;
    @_top: 15%;
    @_bottom: 3%;
    .header{
      background-color: transparent;
      text-align: right;
      padding: 20px 0;
      position: absolute;
      left: 0;
      right: 0;
      top: @_top;
      margin-top: -66px;
      .icon{
        color: #fff;
        cursor: pointer;
      }
    }
    .content{
      position: absolute;
      top:@_top;
      height: auto;
      max-height: 100% - @_bottom - @_top;
      overflow: auto;
    }
  }
</style>
